<template>
  <div id="app">
    <div class="log">
      <LxMain :data="list1">
        <template #title>
          <div class="hobby">本周热搜 &nbsp; TOP5</div>
        </template>
        <template #cont="{item}">
          <p>#{{item.title}}</p>
          <span>{{item.redu}}</span>
        </template>
      </LxMain>

      <LxMain :data="list2">
        <template #title>
          <div class="hobby"><span>肯能感兴趣的人</span><span>换一批</span> </div>
        </template>
        <template #cont="{item}">
          <div class="xinx">
            <span>{{item.name}}</span><span> &nbsp;{{item.age}}岁</span>
            <p>研究领域：{{item.zy}}</p>
            <p>{{item.dx}}&nbsp; {{item.zc}}</p>
          </div>
          <div class="concern">+关注</div>
        </template>
      </LxMain>
    </div>
  </div>
</template>

<script>
import LxMain from './components/LxMain.vue'
export default {
  components: {
    LxMain,
  },
  data () {
    return {
      list1: [
        { id: 1, title: '区块链', redu: 98 },
        { id: 2, title: '无人机', redu: 98 },
        { id: 3, title: '无人机', redu: 98 },
        { id: 4, title: '生命科学', redu: 98 },
        { id: 5, title: '传感器', redu: 98 },
      ],
      list2: [
        { id: 1, name: '李国胜', age: 52, zy: '机电一体化', dx: '哈尔滨大学', zc: '教授' },
        { id: 2, name: '陈颖', age: 36, zy: '人工智能', dx: '清华大学', zc: '副教授' },

      ]
    };
  },
}
</script>

<style lang="less" scoped>
.log {
  width: 300px;
  margin: 100px auto;
}
</style>